import { useState } from 'react'
import {
  Popup, Space, Button, Form, TextArea,
  Input,
} from 'antd-mobile'

import './App.css'

function App() {
  const [visible1, setVisible1] = useState(false)

  return (
    <>
      <Space direction='vertical'>
        <>
          <Button
            onClick={() => {
              setVisible1(true)
            }}
          >
            底部弹出
          </Button>
          <Popup
            visible={visible1}
            onMaskClick={() => {
              setVisible1(false)
            }}
            onClose={() => {
              setVisible1(false)
            }}
            bodyStyle={{ height: '40vh' }}
          >

            <Form
              layout='horizontal'
              footer={
                <Button block type='submit' color='primary' size='large'>
                  提交
                </Button>
              }
            >
              <Form.Header>水平布局表单</Form.Header>
              <Form.Item
                name='name'
                label='姓名'
                rules={[{ required: true, message: '姓名不能为空' }]}
              >
                <Input onChange={console.log} placeholder='请输入姓名' />
              </Form.Item>
              <Form.Item name='address' label='地址' help='详情地址'>
                <TextArea
                  placeholder='请输入地址'
                  maxLength={100}
                  rows={2}
                  showCount
                />
              </Form.Item>

            </Form>





          </Popup>
        </>
      </Space>
    </>
  )
}

export default App
